<template>
    <div class="payBook">
      <div style="height: 88px;"></div>
      <div class="listBox">
        <div class="btn" @click="handleDown">
          {{ $t('assemble.导出订单列表') }}
        </div>
        <div id="excel">
          <el-table :data="tableData" id="out-table" :border="true">
            <el-table-column property="number" width="170"></el-table-column>
            <el-table-column property="date" width="100"></el-table-column>
            <el-table-column property="name" width="150"></el-table-column>
            <el-table-column property="category" width="100"></el-table-column>
            <el-table-column property="brand" width="130"></el-table-column>
            <el-table-column property="pro" width="150"></el-table-column>
            <el-table-column property="num" width="100"></el-table-column>
            <el-table-column property="price" width="100"></el-table-column>
            <el-table-column property="total" width="100"></el-table-column>
            <el-table-column property="stateName" width="80"></el-table-column>
          </el-table>
        </div>

        <div style="height: 100px;"></div>
      </div>
    </div>
  </template>
  
  <script>
 
  import htmlToPdf from '../../utils/htmltopdf';
  import { getOrderlist, } from '@/utils/api'
  
  export default {
    components: {
     
    },
    data() {
      return {
        pageInfo: {
          page: 1,
          limit: 10,
          total: 0,
        },
        tableData: []
  
      }
    },
    mounted() {
      this.getOrderDatalist()
    },
    methods: {
      async getOrderDatalist() {
        let res = await getOrderlist({
          page: this.pageInfo.page,
          limit: this.pageInfo.limit
        })
        if (res.code == 1) {
          console.log("订单列表", res)
          this.tableData = res.data.list
          this.tableData.forEach((item, index) => {
            this.tableData[index].date = this.timestampToTime(item.createtime)
            if (item.state == -1) {
              item.stateName = this.$t('assemble.未通过审批')
            }
            if (item.state == 0) {
              item.stateName = this.$t('assemble.待审批')
            }
            if (item.state == 1) {
              item.stateName = this.$t('assemble.审核通过')
            }
            if (item.state == 2) {
              item.stateName = this.$t('assemble.生产中')
            }
            if (item.state == 3) {
              item.stateName = this.$t('assemble.发货')
            }
            if (item.state == 4) {
              item.stateName = this.$t('assemble.完成')
            }
          })
  
          this.tableData.unshift({
            number: this.$t('assemble.订单编号'),
            date: this.$t('assemble.下单日期'),
            name: this.$t('assemble.商品名称'),
            category: this.$t('assemble.产品类别'),
            brand: this.$t('assemble.授权品牌'),
            pro: this.$t('assemble.授权品牌子类别'),
            num: this.$t('assemble.数量'),
            price: this.$t('assemble.单价'),
            total: this.$t('assemble.总价'),
            stateName: this.$t('assemble.订单状态')
          })
        }
      },
  
      handleDown() {
        htmlToPdf.downloadPDF(document.querySelector('#excel'), '订单列表');
      },
  
      timestampToTime(timestamp) {
        // 时间戳为10位需*1000，时间戳为13位不需乘1000
        var date = new Date(timestamp * 1000);
        var Y = date.getFullYear() + "-";
        var M =
          (date.getMonth() + 1 < 10
            ? "0" + (date.getMonth() + 1)
            : date.getMonth() + 1) + "-";
        var D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
        return Y + M + D;
      },
  
    }
  }
  </script>
  
  <style scoped lang="scss">
  .payBook {
  
  
    .listBox {
      width: 1200px;
      margin: 20px auto;
  
      .btn {
        height: 40px;
        display: inline-block;
        border-radius: 10px 10px 10px 10px;
        background-color: #FF2424;
        font-size: 18px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 40px;
        text-align: center;
        margin-left: 40px;
        cursor: pointer;
        padding: 0 20px;
      }
  
  
      .tableHeader {
        display: flex;
        clear: both;
  
        p {
          &:nth-of-type(1) {
            width: 300px;
            text-align: center;
          }
  
          &:nth-of-type(2) {
            width: 300px;
            text-align: center;
          }
  
          &:nth-of-type(3) {
            width: 200px;
            text-align: center;
          }
  
          &:nth-of-type(4) {
            width: 150px;
            text-align: center;
          }
  
          &:nth-of-type(5) {
            width: 150px;
            text-align: center;
          }
  
          &:nth-of-type(6) {
            width: 150px;
            text-align: center;
          }
  
          &:nth-of-type(7) {
            width: 150px;
            text-align: center;
          }
  
          &:nth-of-type(8) {
            width: 150px;
            text-align: center;
          }
  
          &:nth-of-type(9) {
            width: 150px;
            text-align: center;
          }
        }
      }
  
      .tableBody {
        .tableitem {
          display: flex;
        }
      }
    }
  }
  </style>